<template>
  <ElSelect v-model="value">
    <ElOption v-for="(column, columnName) in seed.columns" :label="column.label" :value="columnName" :key="columnName" />
  </ElSelect>
</template>
<script setup lang="ts">
  import { getSeed } from '@/views/seed-dev';
  import { ElOption, ElSelect } from 'element-plus';
  import { ref, watch, watchEffect } from 'vue';

  const props = defineProps<{seedName: string, modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])

  const seed = getSeed(props.seedName)
  const value = ref<string>(props.modelValue)

  watchEffect(() => emits('update:modelValue', value.value))
  watch([() => props.seedName, () => props.modelValue], () => value.value = props.modelValue)
</script>